<template>
  <div class="music-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      loading-text="加载中"
      @load="onLoad"
    >
      <van-cell-group>
        <van-cell title="热门推荐" />
      </van-cell-group>

      <!--歌曲列表 -->

      <van-cell
        class="music-list-item"
        v-for="(music, index) in musicList"
        :key="index"
        :to="{
          name:'play',
          params:{
            playid:music.id,
          }
        }"
      >
        <div class="musicImg">
          <img :src="music.picUrl" alt="" />
        </div>
        <div class="musicname">{{ music.name }}</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getNewMusic } from "@/api/home.js";
import musicPlay from "@/components/play";
export default {
  components: {
    musicPlay,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      //  默认取出推荐音乐的数量
      musicLimit: 150,
      musicList: [],

      // 实现简单前端分页
      //每一页的数量
      pageSize: 10,
      //当前页数
      currentPage: 1,
    };
  },
  methods: {
    async onLoad() {
      // 获取推荐新音乐
      const { data } = await getNewMusic({
        limit: this.musicLimit,
      });
      const { result } = data;
      let musicLists = result;

      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;

      this.musicList.push(...musicLists.slice(begin, end));
      this.loading = false;

      // 数据全部加载完成

      if (musicLists.length) {
        //  更新获取下一页码
        this.currentPage++;
      } else {
        // 没有数据了
        this.finished = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.music-list {
  // 设置图片和文字对其
  .van-cell__value {
    display: flex;
    align-items: center;
  }
  .music-list-item {
    border-bottom: 1px solid #efefef;
    .musicImg {
      width: 35px;
      height: 35px;
      img {
        width: 35px;
        height: 35px;
      }
    }
    .musicname {
      padding-left: 20px;
    }
  }
  .popUp {
    height: 100%;
  }
}
//弹出框 的关闭按钮颜色
/deep/ .van-popup__close-icon {
  color: #fff;
}
</style>